<template>
    <header class="detail-header">
        <div class="detail-userinfo">
            <span @click="$router.back()"><svg t="1731294367802" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="7733" width="28" height="28">
                    <path
                        d="M635.2 784c-6.4 0-12.8-1.6-17.6-6.4L371.2 529.6c-9.6-9.6-9.6-24 0-33.6l248-248c9.6-9.6 24-9.6 33.6 0 9.6 9.6 9.6 24 0 33.6L422.4 512l230.4 230.4c9.6 9.6 9.6 24 0 33.6-4.8 4.8-11.2 8-17.6 8z"
                        fill="#272636" p-id="7734"></path>
                </svg>
            </span>
            <span>
                <van-image
                    src="https://cdn7.axureshop.com/demo2024/2251242/images/%E6%96%87%E7%AB%A0%E6%B8%B8%E8%AE%B0%E8%AF%A6%E6%83%85/u1054.svg" />
                <span style="color:#333;font-size: 16px; position: relative; bottom: 7px;left: 5px;">北京大表姐</span>
            </span>
            <span><van-button @click="$router.push('/message/chat')">
                    <svg t="1731294537127" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8802" width="12" height="12">
                        <path
                            d="M887.808 841.04533332H129.024c-35.84 0-65.024-29.184-65.024-65.024V219.98933332c0-35.84 29.184-65.024 65.024-65.024h759.296c35.84 0 65.024 29.184 65.024 65.024v556.032c-0.512 35.84-29.696 65.024-65.536 65.024zM129.024 206.16533332c-7.68 0-13.824 6.144-13.824 13.824v556.032c0 7.68 6.144 13.824 13.824 13.824h759.296c7.68 0 13.824-6.144 13.824-13.824V219.98933332c0-7.68-6.144-13.824-13.824-13.824H129.024z"
                            fill="#000000" p-id="8803"></path>
                        <path
                            d="M486.912 555.86133332L203.264 272.21333332c-10.24-10.24-10.24-26.112 0-36.352s26.112-10.24 36.352 0l283.648 283.648c10.24 10.24 10.24 26.112 0 36.352-10.24 9.728-26.624 9.728-36.352 0z"
                            fill="#000000" p-id="8804"></path>
                        <path
                            d="M813.568 271.18933332l-283.648 283.648c-10.24 10.24-26.112 10.24-36.352 0s-10.24-26.112 0-36.352l283.648-283.648c10.24-10.24 26.112-10.24 36.352 0 9.728 10.24 9.728 26.624 0 36.352z"
                            fill="#000000" p-id="8805"></path>
                    </svg><span style="position: relative; left: 3px;bottom: 1px;">发私信</span>
                </van-button></span>
        </div>
    </header>
</template>

<style scoped lang="scss">
.detail-header {
    width: 100%;
    height: 0.7rem;

    .detail-userinfo {
        height: 100%;
        line-height: 0.7rem;
        display: flex;
        justify-content: space-between;
        background-color: rgba(255, 255, 255, 1);
        margin-top: 10px;


        .van-button {
            width: 80px;
            height: 30px;
            border-radius: 15px;
            border-color: rgba(153, 153, 153, 1);
            background-color: rgba(255, 255, 255, 1);
            font-size: 12px;
            right: 7px;
            position: relative;
            bottom: 10px;
        }
    }
}
</style>